<template>
    <div class="mine" ref="mine">
    	<div class="mine-content">
    		<div class="mine-nav clearfix">
				<span class="title feb fl">我的</span>
				<span class="setting feb fr">设置</span>
			</div>
			<div class="mine-wrapper">
				<div class="user-msg clearfix">
					<div class="avatar br50 fl">
						<img :src="baseMsg.headShowUrl" alt="">
					</div>
					<div class="user-detail fl">
						<h2 class="nickName">{{baseMsg.nickName}}</h2>
						<p class="career"></p>
						<p class="desc"></p>
					</div>
				</div>
			</div>
			<Split></Split>
    	</div>
    </div>
</template>

<script type="text/ecmacript-6">
import Split from 'base/Split/Split'
import axios from 'axios'

export default {
	data () {
		return {
			baseMsg : {}
		}
	},
	created () {
		this._getData ()
	},
	methods : {
		_getData () {
			axios.get('/api/baseMsg')
				.then((response) => {
					this.baseMsg = response.data
					console.log(this.baseMsg)
				})
				.catch((e) => {
					alert('Can not get datas...')
				})
		}
	},
	components : {
		Split
	}
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable"
@import "~common/stylus/mixin"

.mine
	height : 100%
	.mine-nav
		top : 0
		left : 0
		width : 100%
		height : 5*$font-size-small-s
		line-height : 5*$font-size-small-s
		color : $color-111
		.title
			margin-left : $font-size-large
			font-size : $font-size-large
		.setting
			margin-right : $font-size-large
			font-size : $font-size-medium-x
	.mine-wrapper
		padding-top : 30px
</style>
